<template>
  <div class="page-container-padding">
    <div>
      <el-button
        icon="el-icon-refresh"
        size="mini"
        type="primary"
        :loading="refreshLoading"
        @click="refreshMyLecture"
      >
        刷新状态
      </el-button>
      <div style="margin: 6px 0; color: #007fce; font-weight: 600">
        点击附件中的文件名可在线预览文件，或点击将文件在线下载到本地；
      </div>
    </div>
    <div>
      <el-table :data="recordData.data" border stripe>
        <el-table-column label="详细" type="expand" width="70">
            <template #default="scope">
              <div style="margin-top: 10px; margin-left: 20px; font-size: larger;">审核附件:</div>
              <div style="height: 10px; margin: 20px; font-size: larger;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                   
                <span v-if="scope.row.annex_name != ''" style="cursor: pointer;">
                  <i class="el-icon-download" @click="DownloadAnnex(scope.row.annex_file)"></i> 
                </span>
                <span> {{ scope.row.annex_name }}</span>
                <span v-if="scope.row.annex_name == ''">暂无或未公开</span>
              </div>
            </template>
          </el-table-column>
        <el-table-column prop="linkman" label="申请人" width="100" show-overflow-tooltip />
        <el-table-column prop="create_time" label="创建时间" width="160" />
        <el-table-column prop="apply_msg" label="申请内容" show-overflow-tooltip/>
        <el-table-column prop="apply_plat" label="申请平台" show-overflow-tooltip width="110"/>
        <el-table-column prop="use_to" label="用途" show-overflow-tooltip width="200"/>
        <el-table-column prop="apply_notes" label="申请备注" show-overflow-tooltip width="200" />
        <el-table-column
          show-overflow-tooltip
          prop="link_msg"
          label="联系方式"
          width="130"
        />
        <el-table-column label="状态" width="90" show-overflow-tooltip>
          <template #default="scope">
            <div
              :class="
                scope.row.state === -1
                  ? 'black'
                  : scope.row.state === 0
                  ? 'red'
                  : 'green'
              "
            >
              <span v-if="scope.row.state == -1">待处理</span>
              <span v-if="scope.row.state == 0">已拒绝</span>
              <span v-if="scope.row.state == 1">已完成</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="state_plain" label="状态说明" show-overflow-tooltip width="90" />
        <el-table-column prop="model_file" label="附件" show-overflow-tooltip width="160" >
          <template #default="scope">
            <div v-if="scope.row.model_file != ''" class="downloadCSS"  style="color: #349cfc;">
                <i class="el-icon-download" @click="toDownloadAnnex(scope.row.model_file)"></i>
                <span @click="previewFile(scope.row.id,1)">&nbsp;{{ scope.row.model_file }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码器 -->
    <div style="margin-top: 8px">
      <el-pagination
        style="margin-top: 5px"
        background
        hide-on-single-page
        :current-page="recordData.page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="recordData.totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
    <!-- 预览文件的窗口 -->
    <el-dialog
        v-if="showPreview"
        :visible.sync="showPreview"
        :title="previewItem.title"
        :close-on-click-modal="false"
        custom-class="preview-dialog"
        width="70%"
        top="3%"
      >
        <div style="height: 75vh; overflow: scroll">
          <div
            v-for="(img, index) in previewItem.images"
            :key="index"
            class="img-item"
          >
            <el-image :src="img" fit="contain" lazy></el-image>
          </div>
        </div>
      </el-dialog>
  </div>
</template>
<script>
  import { QueryShouquanRecord,GetMyRecordPreviewImages } from '@/api/prodService/shouquan'
  import { GetBlob } from '@/utils/dataUtils'
  export default {
    data() {
      return {
        refreshLoading: false,
        annexLoading: false,
        page: 1,
        pageSize: 30,
        recordData: {
          data: [],
          page: 1,
          totalCount: 0,
        },

        currentRow: {
          rowId: -1,
          rowTopic: '',
          rowState: null,
          rowScore: 0,
          rejuectPlain: '',
          hasAnnex: false,
          annexName: '',
          canDownload: false,
          annexUrl: '',
        },
        showReject: false,
        showPreview: false,
        previewItem: {
          previewLoading: false,
          recordId: -1,
          title: '预览资料',
          annexName: '',
          images: [],
        },
      }
    },
    mounted() {
      this.getMyApplyRecord()
    },
    methods: {
      getMyApplyRecord() {
        this.refreshLoading = true
        QueryShouquanRecord(this.page, this.pageSize)
          .then((res) => {
            const data = res.data
            this.recordData.data = data.data
            this.recordData.totalCount = data.total_count
            this.recordData.page = data.page
            this.refreshLoading = false
          })
          .catch(() => {
            this.$baseMessage('获取数据出错了...', 'error')
            this.refreshLoading = false
          })
      },
      // 刷新状态
      refreshMyLecture() {
        this.getMyApplyRecord()
      },

      // 预览文件
      previewFile(annexNote,note) {
        this.previewItem.recordId = -1
        this.previewItem.images = []
        // 发送请求获取预览图片数据
        this.previewItem.previewLoading = true
        if (note){
          this.currentRow.rowId = annexNote
          GetMyRecordPreviewImages(this.currentRow.rowId, note).then((res) => {
          const data = res.data
          this.previewItem.recordId = data.id
          this.previewItem.images = data.images
          this.previewItem.title = data.topic
          this.previewItem.previewLoading = false
          setTimeout(() => {
            this.showPreview = true
            }, 500)
          })
        }
        else{
          GetMyRecordPreviewImages(this.currentRow.rowId).then((res) => {
          const data = res.data
          this.previewItem.recordId = data.id
          this.previewItem.images = data.images
          this.previewItem.title = data.topic
          this.previewItem.previewLoading = false
          setTimeout(() => {
            this.showPreview = true
            }, 500)
          })
        }
      },   

      //下载申请附件
      toDownloadAnnex(file_download) {
        if (!file_download) {
          this.$baseMessage('附件文件不存在!', 'error')
          return
        }
        this.annexLoading = true    
        GetBlob('http://127.0.0.1:8000/static/Annexes/ProductService/Shouquan/' + file_download).then((blob) => {
          let a = document.createElement('a')
          a.href = window.URL.createObjectURL(blob)
          a.target = '_blank'
          a.download = file_download.substring(7,file_download.length) 
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          this.annexLoading = false
        })
      },

      //下载审核附件
      DownloadAnnex(file_download) {
        if (!file_download) {
          this.$baseMessage('文件暂无或未公开，无法下载!', 'error')
          return
        }
        this.annexLoading = true   
        const url = file_download.substring(32,file_download.length) 
        GetBlob('http://127.0.0.1:8000/static/Annexes/ProductService/Shouquan/' + url).then((blob) => {
          let a = document.createElement('a')
          a.href = window.URL.createObjectURL(blob)
          a.target = '_blank'
          a.download = file_download.substring(40,file_download.length) 
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          this.annexLoading = false
        })
      },

      // 页码改变
      currentPageChanged(page) {
        this.page = page
        this.getMyApplyRecord()
      },
    },
  }
</script>
<style scoped lang="scss">
  .black {
    color: #000000;
  }
  .green {
    color: #0dd068;
  }
  .red {
    color: #e74736;
  }
  .downloadCSS {
    cursor: pointer;
  }
  .dialog-topic {
    line-height: 30px;
    margin-bottom: 30px;
    color: #349cfc;
    font-size: 18px;
  }
  .annex-block {
    background-color: rgb(200, 200, 200, 0.2);
    border: 1px solid rgb(200, 200, 200, 0.3);
    padding: 8px;
    margin-top: 16px;
  }
  .evaluate-block {
    margin-top: 16px;
  }
  .dialog-label {
    line-height: 30px;
    color: #008efc;
    font-weight: 700;
    font-size: 16px;
  }
  .reject-dialog-label {
    line-height: 30px;
    color: #e74736;
    font-weight: 700;
    font-size: 16px;
    margin-top: 20px;
  }
  .reject-palin {
    line-height: 30px;
    font-size: 16px;
    text-indent: 2em;
  }
  .preview-dialog {
    text-align: center;
    img {
      width: 100%;
    }
    .img-item {
      margin-bottom: 10px;
      text-align: center;
      min-height: 150px;
      box-shadow: 2px 2px 5px #888888;
    }
  }
</style>
